<template>
  <div>
    <h1>自定义指令 - 自动获取焦点</h1>
    用户名 : <input v-focus id="#inp" type="text">
    密码 : <input id="#inp" type="text">



       <h1>自定义指令,修改字体颜色</h1>
       <p v-color="color">我是一个可爱的P</p>
     <button @click="color = 'purple'">改变颜色</button>
  </div>
</template>

<script>
  //和Vue 会显得格格不入
  // window.onload =function(){
  //   console.log('我执行了');
  //   const input =  document.querySelector('#inp');
  //   input.focus()
  //   }
export default {
  //局部注册的语法
  //directives:{
  //   指令名:指令明:{配置对象}
  //},
    directives:{
      focus:{
      inserted(el){
        el.focus()
      }
      },
      color:{
        // inserted 是绑定的DOM 插入到页面时执行的函数, 只会执行一次,后期如果指  令的值发生变化也不会再执行了
        // 参数1:指令绑定的元素
        // 参数2:参数对象
        // 参数也是可以解构赋值的
        inserted(el,{ value }){
          // console.log(el,binding);
          el.style.color =value
        },
        //这个函数会在指令的值发生变化时执行
        update(el,{ value }){
        // console.log('我更新了值', binding.value);
        el.style.color = value
        }
      }
    },
  data() {
    return {
      color:'yellowgreen'
    };
  },
};
</script>

<style>

</style>